<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/layui.js"></script>
</head>
<body>
<div style="margin: 20px 30px;">
    <div class="layui-tab" lay-filter="tabChange">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="11">网站设置</li>
            <li lay-id="22">用户管理</li>
            <li lay-id="33">权限分配</li>
            <li lay-id="44">商品管理</li>
            <li lay-id="55">订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">
                <div style="height: 150px; border: 1px solid bisque;">
                    <div class="layui-form-item" style="margin-top: 50px;">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="name" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>

                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" id="password" placeholder="请输入密码" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div style="float: right; margin-right: 50px;">
                            <button class="layui-btn layui-btn-normal" data-type="clear" id="clear_button">清空</button>
                            <button class="layui-btn layui-btn-normal" data-type="reload" id="search_button">搜索</button>
                        </div>
                    </div>
                </div>
                <div>
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'form', 'element'], function () {
        let table = layui.table;
        let form = layui.form;
        let element = layui.element;

        //第一个实例
        table.render({
            elem: '#demo'
            //,height: 312
            , url: '/api/user/page' //数据接口
            , method: 'get'
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', align: 'center', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'name', align: 'center', title: '用户名',}
                , {field: 'password', align: 'center', title: '密码'}
                , {field: 'status', align: 'center', title: '状态'}
                , {field: 'createDateTime', align: 'center', title: '签名'}
            ]]

        });

        let $ = layui.$, active = {
            reload: function () {
                let name = $('#name');
                let password = $('#password');

                //执行重载
                table.reload('demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        name: name.val()
                        , password: password.val()
                    }
                }, 'data');
            }
        };

        $('#search_button').click(function () {
            let type = $(this).data('type');
            console.log(111, type);
            active[type] ? active[type].call(this) : '';
        });

        $('#clear_button').click(function () {
            $('#name').val('');
            $('#password').val('');
            $('#search_button').trigger('click');
        });

        let layid = location.hash.replace(/^#tabChange=/, '');
        element.tabChange('tabChange', layid);

        element.on('tab(tabChange)', function (elem) {
            location.hash = 'tabChange=' + $(this).attr('lay-id');
        });
    });
</script>
</html>